<template>
  <div class="app-container">
    <el-descriptions :column="1" class="out-border mb10">
      <template
        slot="extra"
        v-if="saleInfo && saleInfo.saleStatus == 'WAITING'"
      >
        <!-- <el-button size="small" type="danger" @click="onPlatformRefuse"
          >拒绝售后</el-button
        > -->
        <el-button size="small" type="warning" @click="goDone"
          >去处理</el-button
        >
      </template>
      <el-descriptions-item label="售后单id">
        {{ saleInfo && saleInfo.serviceOrderId }}
      </el-descriptions-item>
      <el-descriptions-item label="关联订单id">
        {{ saleInfo && saleInfo.serviceOrderId }}&nbsp;&nbsp;
        <router-link
          style="margin-left: 10px"
          v-if="saleInfo && saleInfo.serviceOrderId"
          :to="`/order/platformDetail?serviceOrderId=${saleInfo.serviceOrderId}`"
        >
          <el-link :underline="false" type="primary"> 查看 </el-link>
        </router-link>
      </el-descriptions-item>
      <el-descriptions-item label="售后状态">
        <el-link
          v-if="saleInfo && saleInfo.saleStatus"
          :type="getSaleTypeColor(saleInfo.saleStatus)"
        >
          {{ saleInfo && saleInfo.saleStatus | filterSaleStatusEnum }}
          {{
            saleInfo.saleStatus == "REFUSE"
              ? `，原因：${saleInfo.refuseReason || "--"}`
              : ""
          }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="来源">
        {{ saleInfo && saleInfo.source | filterSaleSourceEnum }}
      </el-descriptions-item>
      <el-descriptions-item label="售后类型">
        {{ saleInfo && saleInfo.afterSaleType }}
      </el-descriptions-item>
      <el-descriptions-item label="问题描述">
        {{ saleInfo && saleInfo.problem }}
      </el-descriptions-item>
      <el-descriptions-item label="联系电话">
        {{ saleInfo && saleInfo.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="证据">
        <div v-if="saleInfo && saleInfo.proof">
          <el-image
            v-for="item in saleInfo.proof.split(',')"
            :key="item"
            style="width: 100px; height: 100px"
            :src="item"
            :preview-src-list="[saleInfo.proof.split(',')]"
          ></el-image>
        </div>
        <div v-else>--</div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" title="赔付信息" class="out-border mb10">
      <el-descriptions-item label="处理结果">
        {{ saleInfo && saleInfo.dispose }}
      </el-descriptions-item>
      <el-descriptions-item label="向商家赔款">
        {{ saleInfo && saleInfo.merchantSaleAmount | filterPriceFormat }}
      </el-descriptions-item>
      <el-descriptions-item label="向师傅扣款" v-if="saleInfo && saleInfo.saasId == 'LiuGe'">
        {{ saleInfo && saleInfo.workerSaleAmount | filterPriceFormat }}
      </el-descriptions-item>
      <el-descriptions-item label="向服务商扣款" v-if="saleInfo && saleInfo.saasId != 'LiuGe'">
        {{ saleInfo && saleInfo.saasSaleAmount | filterPriceFormat }}
      </el-descriptions-item>
      <el-descriptions-item label="处理人">
        {{ (saleInfo && saleInfo.disposeName) || "--" }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" title="商家信息" class="out-border mb10">
      <el-descriptions-item label="商家名称">
        {{ (saleInfo && saleInfo.merchantName) || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="联系人">
        {{ (saleInfo && saleInfo.merchantContactName) || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="联系手机号">
        {{ (saleInfo && saleInfo.merchantContactPhoneNumber) || "--" }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" title="师傅信息" class="out-border mb10">
      <el-descriptions-item label="师傅id">
        {{ (saleInfo && saleInfo.workerId) || "--" }}&nbsp;&nbsp;
        <router-link
          style="margin-left: 10px"
          v-if="saleInfo && saleInfo.workerId"
          :to="saleInfo.saasId=='LiuGe'?`/worker/personDetail?workerId=${saleInfo.workerId}`:`/serviceProvider/workerDetail?workerId=${saleInfo.workerId}&workerFrom=provider`"
        >
        
          <el-link :underline="false" type="primary"> 查看 </el-link>
        </router-link>
      </el-descriptions-item>
      <el-descriptions-item label="姓名">
        {{ (saleInfo && saleInfo.workerName) || "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        {{ (saleInfo && saleInfo.workerMobile) || "--" }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" title="变更记录" class="out-border">
      <el-descriptions-item label="创建时间">
        {{ (saleInfo && saleInfo.createTime) || "--" }}
      </el-descriptions-item>
      <el-descriptions-item
        label="完成时间"
        v-if="saleInfo && saleInfo.finishTime"
      >
        {{ (saleInfo && saleInfo.finishTime) || "--" }}
      </el-descriptions-item>
      <el-descriptions-item
        label="拒绝时间"
        v-if="saleInfo && saleInfo.refuseTime"
      >
        {{ saleInfo && saleInfo.refuseTime }}
      </el-descriptions-item>
      <el-descriptions-item
        label="取消时间"
        v-if="saleInfo && saleInfo.cancelTime"
      >
        {{ saleInfo && saleInfo.cancelTime }}
      </el-descriptions-item>
    </el-descriptions>
    <ResultDialog ref="resultRefs" @done="getData" />
    <resultSaasDialog ref="resultSaasRefs" @done="getData" />
  </div>
</template>
<script>
import {
  apiServiceSaleReturnBDetail,
  apiServiceSaleReturnBRefuse,
} from "@/api/salesAfter.js";
import ResultDialog from "./components/resultDialog.vue";
import resultSaasDialog from "./components/resultSaasDialog.vue";
export default {
  components: { ResultDialog, resultSaasDialog },
  data() {
    return {
      serviceSaleReturnId: "",
      saleInfo: null,
    };
  },
  mounted() {
    const { serviceSaleReturnId } = this.$route.query;
    if (serviceSaleReturnId) {
      this.serviceSaleReturnId = serviceSaleReturnId;
      this.getData();
    }
  },
  methods: {
    getData() {
      apiServiceSaleReturnBDetail({
        serviceSaleReturnId: this.serviceSaleReturnId,
      }).then((res) => {
        this.saleInfo = res.data;
      });
    },
    // 处理售后
    goDone() {
      if (this.saleInfo.liugeFlag) {
        this.$refs.resultRefs.open({
          serviceSaleReturnId: this.saleInfo.serviceSaleReturnId,
          liugeFlag: this.saleInfo.liugeFlag,
        });
      } else {
        this.$refs.resultSaasRefs.open({
          serviceSaleReturnId: this.saleInfo.serviceSaleReturnId,
        });
      }
    },
    // 平台独有拒绝售后
    onPlatformRefuse() {
      this.$prompt("此操作将拒绝售后订单, 是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: value => {
          if (!value) {
            return "请输入拒绝原因!";
          } else if (value.length > 40) {
            return "最多支持40个字符!";
          } else {
            return true;
          }
        }
      })
        .then(({ value }) => {
          apiServiceSaleReturnBRefuse({
            serviceSaleReturnId: this.serviceSaleReturnId,
            refuseReason: value,
          }).then((res) => {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.getData();
          });
        })
        .catch(() => {});
    },
    getSaleTypeColor(str) {
      if (str == "WAITING") {
        return "warning";
      } else if (str == "CANCEL") {
        return "info";
      } else if (str == "REFUSE") {
        return "danger";
      } else if (str == "FINISH") {
        return "success";
      } else {
        return "--";
      }
    },
  },
};
</script>
